<template>
	<view class="user-info">
		<view class="user-info-title">
			基本信息
		</view>
		<uni-list>
			<uni-list-item showArrow :clickable="true" @click="$refs.avatarUp.open()">
				<template v-slot:header>
					<view class="list-title" style="line-height: 60rpx;">头像</view>
				</template>
				<template v-slot:body>
					<image :src="userInfo.avatar||'/static/user-default.jpg'" class="list-img">
					</image>
				</template>
			</uni-list-item>
			<uni-list-item>
				<template v-slot:header>
					<view class="list-title">手机号</view>
				</template>
				<template v-slot:body>
					<text>188****8888</text>
				</template>
			</uni-list-item>
			<uni-list-item showArrow>
				<template v-slot:header>
					<view class="list-title">会员码</view>
				</template>
				<template v-slot:body>
					<uni-icons custom-prefix="iconfont" type="icon-erweima" size="22"></uni-icons>
				</template>
			</uni-list-item>
			<uni-list-item showArrow :clickable="true" @click="$refs.nameup.open();">
				<template v-slot:header>
					<view class="list-title">姓名</view>
				</template>
				<template v-slot:body>
					<text>{{userInfo.name||'请填写'}}</text>
				</template>
			</uni-list-item>
			<uni-list-item showArrow :clickable="true" @click="$refs.sexup.open();">
				<template v-slot:header>
					<view class="list-title">性别</view>
				</template>
				<template v-slot:body>
					<text>{{userInfo.gender==0?'女':'男'}}</text>
				</template>
			</uni-list-item>
			<uni-list-item showArrow>
				<template v-slot:header>
					<view class="list-title">生日</view>
				</template>
				<template v-slot:body>
					<uni-datetime-picker type="date" :end="endDate" @change="changeDay">
						<view>{{userInfo.birthday||'请选择生日'}}</view>
					</uni-datetime-picker>
				</template>
			</uni-list-item>
			<uni-list-item showArrow title="收货地址" to="/subpkg/shipping-address/shipping-address" />
		</uni-list>
		<view class="user-info-title">
			通用设置
		</view>
		<uni-list>
			<uni-list-item :show-switch="true">
				<template v-slot:header>
					<view style="font-size: 28rpx;padding-bottom: 20rpx;">个性化推荐</view>
					<view style="font-size: 22rpx;color: #999">开启后可看到你感兴趣的内容，建议开启</view>
				</template>
			</uni-list-item>
		</uni-list>
		<!-- 性别选择弹出层 -->
		<uni-popup ref="sexup" type="bottom">
			<view class="sex-up">
				<view class="sex-btn" v-for="(item,i) in ['女','男']" :key="i" @click="changeSex(i)">
					{{item}}
				</view>
				<view class="sex-close-btn" @click="$refs.sexup.close()">
					取消
				</view>
			</view>
		</uni-popup>
		<!-- 姓名弹出层 -->
		<uni-popup ref="nameup" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改姓名" v-model="uName" placeholder="请输入姓名"
				@confirm="changeName"></uni-popup-dialog>
		</uni-popup>
		<!-- 头像选择弹出层 -->
		<uni-popup ref="avatarUp" type="bottom">
			<view class="sex-up" style="height: 200rpx;">
				<view class="sex-btn" @click="changeImg">
					使用微信头像
				</view>
				<view class="sex-close-btn" @click="$refs.avatarUp.close()">
					取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uName: ','
			};
		},
		computed: {
			endDate() {
				return +new Date()
			}
		},
		methods: {
			async changeSex(i) { // 改变性别
				if (this.userInfo.gender != i) {
					await uni.$http.reqUploadSex(this.user_id, i);
					this.$store.dispatch('setUserInfo');
				}
				this.$refs.sexup.close();
			},
			//改变生日
			async changeDay(val) {
				if (this.userInfo.birthday != val) {
					await uni.$http.reqUploadDay(this.user_id, val);
					this.$store.dispatch('setUserInfo');
				}
			},
			// 改变姓名
			async changeName() {
				if (this.userInfo.name != this.uName) {
					await uni.$http.reqUploadName(this.user_id, this.uName);
					this.$store.dispatch('setUserInfo');
				}
				this.$refs.nameup.close();
			},
			// 改变头像
			async changeImg() {
				let that = this;
				uni.getUserProfile({
					desc: '获取用户头像',
					async success({
						userInfo
					}) {
						await uni.$http.reqUploadAvatar(that.user_id, userInfo.avatarUrl)
						that.$store.dispatch('setUserInfo');
						that.$refs.avatarUp.close();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-info-title {
		height: 70rpx;
		padding-left: 30rpx;
		line-height: 70rpx;
		color: #999;
		font-size: 28rpx;
	}

	.list-title {
		width: 240rpx;
		font-size: 28rpx;
		color: #666;
	}

	.list-img {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.sex-up {
		height: 300rpx;
		overflow: hidden;
		text-align: center;
		background-color: #f7f8fa;
		border-radius: 20rpx;

		.sex-btn {
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
		}

		.sex-close-btn {
			height: 80rpx;
			margin-top: 20rpx;
			line-height: 80rpx;
			background-color: #fff;
		}
	}
</style>
